// 获取操作对象
var contai = document.querySelector('.container');
var main = document.querySelector('.main');
var cart = document.querySelector('.cartbig');
var bottom = document.querySelector('.cart_bottom');
var total = document.querySelector('.cart_total');
// 获取cookie的name键所对应的值
var name1 = getCookie("name")
// 自定义变量，该账户中所有的数据
var lists
// 判断当前该键是否有值
if (name1) {
    show1()
} else {
    // 温馨提示
    // alert("你尚未登录，请登录")
    // 获取地址栏信息
    var url = location.href
    // 跳转到登录页
    location = './login.html?url2=' + url
}

function show1() {
    // 获取当前账号存储的数据
    lists = localStorage.getItem(name1) || "[]"
    // 把字符串转为数组对象
    lists = eval('(' + lists + ')')
    // 判断当前账号是否有值
    if (lists.length > 0) {
        // 检查当前数组中所有的is_select字段是否都等于1
        var bool = lists.every(item => {
            return item.is_select == 1
        })
        // 创建字符串，拼接所有内容
        // 拼接头部
        var str = `
            <ul class="car">
                <li>
                    <input type="checkbox" name="quan" ${bool?"checked":""}>全选
                </li>
                <li>商品</li>
                <li>现价</li>
                <li>数量</li>
                <li>原价</li>
                <li>操作</li>
            </ul>
        `
        // 遍历数组
        lists.forEach(item => {
            // 拼接所有商品
            str += `
            <div class="cartbig">
                    <ul>
                        <li>
                            <input type="checkbox" name="xuan" ${item.is_select==1?"checked":''} data-id="${item.id}">
                        </li>
                        <li>
                            <img src="${item.img}">${item.title}
                        </li>
                        <li style="color:red;"><span>${item.price}</span></li>
                        <li>
                            <button data-id="${item.id}">-</button>
                            <button>${item.cart_num}</button>
                            <button data-id="${item.id}">+</button>
                        </li>
                        <li style="color:#666;text-decoration: line-through;">￥<span>${item.mlpri}</span>
                        </li>
                        <li>
                            <a href="./list.html">继续购买</a>
                            
                            <a href="javascript:;" data-id="${item.id}">删除</a>
                        </li>
                    </ul>
                </div>
            `
        })
        main.innerHTML = str
        // 拼接尾部
        str += `
            <div class="cart_bottom">
                店铺合计：￥<span>${total2()[1]}</span>
            </div>
            <div class="cart_total">
                <i><input type="checkbox" name="quan" ${bool?"checked":""}>全选</i>
                <a href="javascript:;">删除选中的商品</a>
                <a href="javascript:;">移入关注</a>
                <a href="javascript:;">清空购物车</a>
                <div>
                    <i>已选择<span class="totalnum">${total2()[0]}</span>件商品</i>
                    <b>总价：<span>${total2()[1]}</span></b>
                    <button>结算</button>
                </div>
            </div>
        `
        main.innerHTML = str
    } else {
        //当数组没有值时(即购物车没有商品时) 创建字符串，拼接所有内容(提示购物车空空如也)
        str = `
        <div class="jumbotron" style="height:230px;background-color:#eee;margin-top:50px;">
            <h1 style="padding:45px 0 0 45px;">购物车空空的哦~去看看心仪的商品吧~</h1>
            <p style="margin:10px 0 0 45px;color:#666;">点击下方按钮赶紧去选购吧! ^_^</p>
            <p style="border:1px solid #000;width:50px;height:20px;padding:10px;background-color: #976bef;margin:25px 0 0 45px;"><a class="btn btn-primary btn-lg" href="./list.html" role="button" style="color:#fff">去选购</a></p>
        </div>
        `
        // 把拼接好的内容渲染到大盒子
        main.innerHTML = str
    }
}

//給大盒子对象绑定点击事件
contai.onclick = function (e) {
    //事件对象兼容
    var e = e || window.event
    //获取操作目标
    var tg = e.target || e.srcElement

    //判断当前点击的是否为加法按钮
    if (tg.innerHTML == "+") {
        //获取当前按钮的id属性
        var id = tg.getAttribute('data-id')
        console.log(id);
        //遍历数组中所有元素
        lists.forEach(item => {
            //判断当前遍历的元素id是否等于按钮所对应的id
            if (item.id == id) {
                item.cart_num++
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //减法
    if (tg.innerHTML == '-') {
        //获取当前按钮的id
        var id = tg.getAttribute('data-id')
        //遍历数组元素
        lists.forEach(item => {
            //判断当前元素中的id是否等于按钮的id
            if (item.id == id) {
                item.cart_num--
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //删除
    if (tg.innerHTML == "删除") {
        //获取当前按钮的id
        var id = tg.getAttribute('data-id')
        //过滤数组元素的id等于当前按钮id
        lists = lists.filter(item => {
            return item.id != id
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //全选
    if (tg.name == "quan") {
        //遍历数组中所有商品
        lists.forEach(item => {
            //判断全选框是否被选中
            if (tg.checked) {
                //让商品中的is_select字段为1
                item.is_select = 1
            } else {
                item.is_select = 0
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //选中框
    if (tg.name == "xuan") {
        //获取当前选中框的id
        var id = tg.getAttribute("data-id")
        //遍历数组元素
        lists.forEach(item => {
            //判断当前元素的id是否等于选中框的id
            if (item.id == id) {
                //判断当前选中框是否被选中
                if (tg.checked) {
                    item.is_select = 1
                    // quans[0].checked = true;
                    // quans[1].checked = true;
                } else {
                    // quans[0].checked = false;
                    // quans[1].checked = false;
                    item.is_select = 0
                }
            }
        })
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }
    //结算
    if (tg.innerHTML == "结算") {
        //给定确认框
        if (confirm("你确定要购买吗？")) {
            alert("已支付：" + total2()[1])
            //删除已购买的商品
            lists = lists.filter(item => {
                return item.is_select != 1
            })
            //把操作结果重新存放在localStorage中
            localStorage.setItem(name1, JSON.stringify(lists))
            //重新调用显示数据的函数
            show1()
        }
    }
    //清空购物车
    if (tg.innerHTML == "清空购物车") {
        lists = []
        //把操作结果重新存放在localStorage中
        localStorage.setItem(name1, JSON.stringify(lists))
        //重新调用显示数据的函数
        show1()
    }

}

//所选商品数量和价格
function total2() {
    var num1 = 0 // 所选商品数量
    var num2 = 0 //所选商品价格
    //遍历数组元素
    lists.forEach(item => {
        //判断当前商品是否被选中
        if (item.is_select == 1) {
            //累积所有商品数量
            num1 += item.cart_num
            let price = item.price.split('¥')[1];
            //累积所有选中商品的小计
            num2 += item.cart_num * parseFloat(price)
        }
    })
    return [num1, num2.toFixed(2)]
}